<template>
  <div class="heade">
    <div class="header-left">
      <span class="iconfont">&#xe6ed;</span>
    </div>
    
    <div class="search">
      <span class="iconfont">&#xe744;</span>
      输入城市/景点/游玩主题
      </div>

    <div class="header-right">
      <!-- <router-link to="/city"> -->
        合肥
        <span class="iconfont">&#xe602;</span>
        <!-- </router-link> -->
    </div>
  </div>
</template>

<script>
export default {
  name:"heade",
  data() {
    return {
      mes: "hell",
      heade:""
    };
  }
};
</script>

<style scoped lang="stylus">
@import '~css/var.styl';
.heade{
  width: 100%;
  line-height: 1.9rem;
  background: $bgColor;
  /* background: #62e2e6; */
  color: #fff;
  font-size: 0.36rem;
  padding: .5rem 0;
  display: flex;
}
.header-left{
  margin: 0 .3rem;
}
.header-left span {
  vertical-align: middle;
}

.search{
  flex: 1;
  line-height: 2rem;
  background: #fff;
  color: #acb3b3;
  font-size: .8rem;
  border-radius: 5px;
}
.search span{
  vertical-align:top;
  font-size: 1.5rem;
  padding-left: .5rem;
}
.iconfont{
  font-size: 1.7rem;
}
.header-right{
    font-size: .8rem;
    margin: 0 .3rem;
    line-height: 1.6rem;
    padding-top: .1rem;
}
.header-right span{
  font-size: 1.2rem;
}
.header-right a{
  color:#fff;
}
</style>